<template>
  <div class="app">
    <h1>{{msg}}学生姓名是：{{studentName}}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 （第一种）写法，使用@或v-on -->
    <!-- <Student v-on:atguigu="getStudentName" /> -->
    <!-- <Student @atguigu.once="getStudentName" /> -->
    <!-- <Student @atguigu="getStudentName" @demo="m1" /> -->

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 （第二种）写法，使用ref -->
    <!-- 此写法 默认是自定义绑定事件 需要在子组件触发 -->
    <!-- <Student ref="student" @click="show" /> -->

    <!-- 此写法 加了修饰符 渲染模板时 会被解析成原生click事件 无需在子组件使用$emit触发 -->
    <Student ref="student" @click.native="show" />
  </div>
</template>

<script>
  // 引入Student组件
  import Student from "./components/Student"
  // 引入School组件
  import School from "./components/School"

  export default {
    name: "App",
    components: {
      Student,
      School
    },
    data() {
      return {
        msg: "你好啊",
        studentName: ""
      }
    },
    methods: {
      getSchoolName(name) {
        console.log('App收到了学校名：', name)
      },
      getStudentName(name, ...params) {
        console.log('App收到了学生名：' + name, params)
        this.studentName = name;
      },
      m1() {
        console.log("demo事件被触发了")
      },
      show() {
        alert(123);
      }
    },
    mounted() {
      // 这种写法需要等组件挂载完毕，但是功能强大，可以绑定任意事件，并且可以是异步的
      // setTimeout(() => {
        // 组件名是大写 但是调用时候是小写
        // 绑定自定义事件 两次赋值this 第一次是vc 第二次是app实例的methods调用
        this.$refs.student.$on("atguigu", this.getStudentName)
        
        // 箭头函数 内部没有this指向， 向外找到App的this
        /* this.$refs.student.$on("atguigu", (name, ...params) => {
          console.log(this);    // App实例
          console.log('App收到了学生名：' + name, params)
          this.studentName = name;
        }) */

        // 绑定自定义事件 两次赋值this 是vc组件
        /* this.$refs.student.$on("atguigu", function(name, ...params) {
          console.log(this);    // vc组件
          console.log('App收到了学生名：' + name, params)
          this.studentName = name;
        }) */
        // 只触发一次
        // this.$refs.student里面的this本应该指向vc组件，但是调用了函数，所以向外找到了App的this
        // this.$refs.student.$once("atguigu", this.getStudentName)
      // }, 3000)
    }
  };
</script>

<style>
  .app {
    background-color: skyblue;
    padding: 5px;
  }
</style>